* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
h4 {
  color: #d81e06;
}
.move_800 {
  transform: translateX(-800px);
}
.move_1600 {
  transform: translateX(-1600px);
}
body {
  width: 100vw;
  height: 100vh;
  background-image: url(img/bg0.jpg);
  display: flex;
  justify-content: center;
  align-items: center;

  .box {
    width: 800px;
    height: 500px;
    border-radius: 10px;
    background: #f1f3f4;

    header {
      height: 60px;
      box-shadow: 0 2px 3px #e3dbd0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo {
        margin-left: 20px;
        .fa-spinner {
          font-size: 40px;
          color: #d81e06;
        }
        span {
          font-size: 28px;
          color: #d81e06;
        }
      }
      .music {
        animation: player_rotate 8s infinite linear forwards;
      }
      .musicStop {
        animation-play-state: paused;
      }
      .form_group {
        width: 380px;
        height: 30px;
        background: #fff;
        border-radius: 15px;
        margin-right: 40px;
        padding: 0 20px;
        input {
          width: 315px;
          height: 30px;
          border: none;
          outline: none;
        }
        img {
          vertical-align: middle;
          width: 20px;
          height: 20px;
        }
      }
    }
    main {
      width: 800px;
      height: 440px;
      overflow: hidden;
      .sections {
        width: 2400px;
        display: flex;
        section {
          width: 800px;
        }
        .home {
          .recommends,
          .history,
          .collection {
            margin: 40px 50px;
          }
          ul {
            width: 600px;
            padding-left: 10px;
            li {
              display: inline-block;
              padding: 0 10px;
              height: 26px;
              margin: 10px;
              font-size: 14px;
              line-height: 26px;
              border-radius: 10px;
              background-color: #e7eaed;
              cursor: pointer;
            }
          }
          .noLike,
          .noHistory {
            font-size: 12px;
            color: gray;
            line-height: 32px;
          }
        }

        .results {
          overflow: hidden;
          position: relative;
          height: 440px;
          ul {
            padding: 10px 20px;
            height: 440px;
            width: 817px;
            overflow: auto;
            li {
              height: 30px;
              margin: 10px;
              border-radius: 2px;
              background-color: #ebe2d9;
              padding: 0 10px;
              line-height: 30px;
              font-size: 14px;
              img {
                width: 20px;
                height: 20px;
                vertical-align: middle;
                cursor: pointer;
              }
              .mv {
                float: right;
                margin-top: 5px;
              }
            }
          }
          .video {
            width: 800px;
            height: 440px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgb(119, 118, 118);
            overflow: hidden;
            z-index: 1;
            img {
              width: 20px;
              height: 20px;
              float: right;
              margin-top: 10px;
              margin-right: 10px;
              cursor: pointer;
            }
            video {
              width: 700px;
              height: 390px;
              margin: 0 50px;
            }
          }
        }
      }
      .details {
        main {
          height: 380px;
          display: flex;
          .animation {
            flex: 1;
            position: relative;
            .player_bar {
              width: 120px;
              height: 90px;
              position: absolute;
              top: -20px;
              left: 200px;
            }
            .player_bar_rotate {
              transform: rotate(22deg);
              transform-origin: top left;
            }
            .player_bar_pausing {
              transform: rotate(0);
              transform-origin: top left;
            }
            .records {
              margin-top: 50px;
              margin-left: 80px;
              height: 280px;
              width: 280px;
              position: relative;

              img {
                width: 280px;
                height: 280px;
                position: absolute;
              }
              .cover {
                width: 160px;
                height: 160px;
                border-radius: 50%;
                left: 60px;
                top: 60px;
              }
            }
            .player_rotate {
              animation: player_rotate 8s infinite linear forwards;
            }
            .player_pausing {
              animation-play-state: paused;
            }
            .info {
              margin-left: 60px;
              line-height: 60px;
              .arts {
                display: inline-block;
                text-align: center;
                margin-left: 20px;
                width: 200px;
                //设置文本溢出
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                vertical-align: middle;
              }
              i {
                color: #b9b9b9;
                cursor: pointer;
                font-size: 20px;
              }
              .red_heart {
                color: red;
              }
            }
          }
          .line {
            width: 2px;
            height: 400px;
            margin-top: 10px;
            background: linear-gradient(#f1f3f4, #b9b9b9, #f1f3f4);
          }
          .comments {
            margin: 10px 10px;
            width: 340px;
            height: 380px;
            overflow: hidden;
            .no_comments {
              font-size: 12px;
              color: gray;
              line-height: 32px;
            }
            ul {
              overflow: auto;
              height: 380px;
              width: 357px;
              li {
                padding: 20px 10px;
                border-bottom: 2px solid #e8e8e8;
                font-size: 14px;

                img {
                  width: 40px;
                  height: 40px;
                  border-radius: 50%;
                  vertical-align: middle;
                }
                span {
                  display: block;
                  width: 270;
                  margin-left: 50px;
                  margin-right: 10px;
                  line-height: 18px;
                }
                &:nth-last-of-type(1) {
                  border: none;
                  margin-bottom: 50px;
                  position: relative;
                  &::after {
                    content: "------------我也是有底线的哦------------";
                    display: block;
                    width: 340px;
                    text-align: center;
                    position: absolute;
                    left: 0;
                    bottom: -20px;
                    color: gray;
                    margin: 10px auto;
                  }
                }
              }
            }
          }
        }
        audio {
          width: 800px;
          height: 60px;
          border-radius: none;
          outline: none;
        }
      }
    }
  }

  .video {
    width: 800px;
    height: 520px;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(119, 118, 118);
    z-index: -1;
  }
}

@keyframes player_rotate {
  to {
    transform: rotate(360deg);
  }
}
